<template>
    <BgTheme></BgTheme>
    <div style="height: 90vh">
        <HeaderTitle title="WaCao,暗色主题原来在这！" style="width: 7rem;margin: 1.5rem auto 0"></HeaderTitle>
        <div class="toggle-box side-card">
            <svg-icon style="cursor: pointer;" :icon-class="app.isDark ? 'moon' : 'sun'" @click="toggle()"></svg-icon>
        </div>
        <ElTheme></ElTheme>
    </div>
</template>

<script setup lang="ts">
import useStore from "@/store";
import BgTheme from "@/views/set/BgTheme.vue";
import ElTheme from "@/views/set/ElTheme.vue";

const {app, web} = useStore();

const toggle = () => {
    app.setIsDark();
    if (!app.isController) {
        window.$message?.success('啊~,你碰到了「头像」的变身开关了!');
        app.isController = true;
    }
}

onActivated(() => {
    app.setBackgroundImg(app.backgroundImgList[5])
})
</script>

<style scoped>
@import "@/assets/styles/mixin.scss";

.toggle-box {
    width: 2rem;
    height: 2rem;
    margin: 0.5rem auto;
    padding: 0.5rem;
}
</style>